<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="addParam({}, 'add')">
							添加定金部门参数
						</el-button>
					</div>
				</el-row>
			</template>
			<cl-table ref="table" v-bind="table">
				<template #column-opt="{ scope: { row } }">
					<div class="flex flex-align-start">
						<el-button
							type="success"
							v-if="row.sys_status != 1"
							@click.stop="startUp(row)"
						>
							启用
						</el-button>
						<el-button type="warning" v-else @click.stop="startUp(row)">
							停用
						</el-button>
						<el-button type="primary" @click.stop="editParam(row, 'edit')">
							修改
						</el-button>
						<el-button type="danger" @click.stop="startUp(row, 99)"> 删除 </el-button>
					</div>
				</template>
			</cl-table>
		</cl-pagefull>
		<!-- 新增、修改部门支付参数 -->
		<add-edit-depodeptparam ref="addeditDepodeptparam" @confirm="refresh" />
	</cl-crud>
</template>

<script>
import AddEditDepodeptparam from "./add-edit-depodeptparam";

export default {
	components: {
		AddEditDepodeptparam
	},
	data() {
		return {
			search: {
				biz_id: ""
				// bra_id: []
			},
			brandList: [],
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					// {
					// 	label: "事业部",
					// 	prop: "biz_name"
					// },
					{
						label: "部门",
						prop: "dept_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "序号",
						prop: "index",
						width: 100
					},
					{
						label: "银联-C扫B-商户号",
						prop: "mid",
						width: 200
					},
					{
						label: "银联-C扫B-终端号",
						prop: "tid",
						width: 150
					},
					{
						label: "是否启用",
						prop: "sys_status",
						formatter: row => (row.sys_status == 1 ? "是" : "否"),
						width: 100
					},
					{ label: "操作", prop: "opt", width: 220, disable: true, fixed: "right" }
				],
				props: {
					"span-method": this.arraySpanMethod
				}
			},
			arr: [],
			pos: null
		};
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.syspay)
				.set("dict", {
					api: {
						page: "deptlists"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		async onRefresh(params, { next, render }) {
			const { list } = await next(params);
			this.arr = [];
			this.arr1 = [];
			this.pos = null;
			this.pos1 = null;
			let map = {};
			list.forEach((e, i) => {
				e.temp_dept_id = e.dept_id[1];
				if (!map[e.temp_dept_id]) {
					map[e.temp_dept_id] = 1;
				} else {
					map[e.temp_dept_id]++;
				}
				e.index = map[e.temp_dept_id];
				if (i === 0) {
					this.arr.push(1);
					this.arr1.push(1);
					this.pos = 0;
					this.pos1 = 0;
				} else {
					if (list[i].temp_dept_id === list[i - 1].temp_dept_id) {
						this.arr[this.pos] += 1;
						this.arr.push(0);
					} else {
						this.arr.push(1);
						this.pos = i;
					}
				}
			});
			render(list);
		},
		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 0) {
				const _row = this.arr[rowIndex];
				const _col = _row > 0 ? 1 : 0;
				return {
					rowspan: _row,
					colspan: _col
				};
			}
		},
		//启用/停用/删除
		startUp(row, type) {
			this.confirm("是否执行此操作?")
				.then(() => {
					let sys_status;
					let message;
					if (!type) {
						sys_status = row.sys_status == 0 ? 1 : 0;
						message = "更改成功!";
					} else {
						sys_status = type;
						message = "删除成功!";
					}
					this.$service.syspay.setdeptstatus({ id: row.id, sys_status }).then(res => {
						this.refresh();
						this.$message({
							type: "success",
							message
						});
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消更改"
					});
				});
		},
		//添加支付参数
		addParam(row, type) {
			this.$refs.addeditDepodeptparam.open(row, type);
		},
		//修改
		editParam(row, type) {
			this.$refs.addeditDepodeptparam.open(row, type);
		},
		changeBiz() {
			this.refresh();
		}
	}
};
</script>

<style lang="scss" scoped></style>
